<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>float</title>
    </head>
    <body>
        <div style="width: 100%;">
            <div style="width: 50%;float: left;">
                <div style="width: 50px; height: 50px; background: red; "></div>
            </div>

            <div style="width: 50%;float: right;">
                <div style="width: 50px; height: 50px; background: green; float: left;"></div>
                <div style="width: 50px; height: 50px; background: orange; float: right;"></div>
            </div>
        </div>

        <div style="clear: both;"></div>

        <div style="background: black; width: 100px; height: 100px; margin-top: 100px;"></div>
    </body>
</html>
